// import React from "react";
// import { connect } from "react-redux";

// const mapStateToProps = (state) => {
//   return {
//     list: state.list,
//   };
// };

// const mapDispatchToProps = (dispatch) => {
//   return {
//     removeItem(id) {
//       dispatch({ type: "removeItem", id });
//     },
//   };
// };

// const List = connect(
//   mapStateToProps,
//   mapDispatchToProps
// )((props) => {
//   return (
//     <ul>
//       {props.list.map((item) => (
//         <li key={item.id}>
//           {item.name} -{" "}
//           <button onClick={() => props.removeItem(item.id)}>删除</button>
//         </li>
//       ))}
//     </ul>
//   );
// });

// // export default connect(mapStateToProps, mapDispatchToProps)(List);
// export default List;

import React from "react";
// react-redux给我们新增了两个hooks
// useSelector是用来获取仓库的数据的
// useDispatch是用来获取仓库的方法的
import { useSelector, useDispatch } from "react-redux";

const List = () => {
  const list = useSelector((state) => state.list);
  const dispatch = useDispatch();

  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>
          {item.name} -{" "}
          <button onClick={() => dispatch({ type: "removeItem", id: item.id })}>
            删除
          </button>
        </li>
      ))}
    </ul>
  );
};

export default List;
